<template>
	<el-tabs v-model="componentVal" style="width: 100%; padding-left: 20px" @tab-click="handleTabClick">
		<el-tab-pane v-for="tab in FieldItem?.options" :key="tab.value" :name="tab.value" :label="tab.label">
			<template #label>
				<span class="custom-tabs-label">
					<el-icon><component :is="iconMap[tab.icon]" /></el-icon>
					<span>{{ tab.label }}</span>
				</span>
			</template>
			<template v-if="componentVal === tab.value">
				<template v-if="tab.radio === 0">
					<CustomTablePape :pageid="tab.pageid" :input-data="{ ...inputData, ...pageData, ...getParams(tab.params) }"></CustomTablePape>
				</template>
				<template v-else-if="tab.radio === 1">
					<CustomPage :pageid="tab.pageid" :input-data="{ ...inputData, ...getParams(tab.params) }" :dialog-data="pageData"></CustomPage>
				</template>
			</template>
		</el-tab-pane>
	</el-tabs>
</template>

<script setup lang="ts">
import { TabFieldType } from '/@/components/Linxyun/custom/DataStructs/commontype';
import CustomTablePape from '../custom/CustomTablePape/index.vue';
import CustomPage from '../custom/CustomizePage/index.vue';
import { calcFieldValue } from '/@/components/Linxyun/custom/CustomCommon/lxy_expression.js';
import iconMap from '/@/utils/iconMap';

const props = withDefaults(
	defineProps<{
		pageData?: any;
		inputData: Record<any, any>;
		globalData?: any;
		modelValue: string;
		FieldItem: TabFieldType | null;
	}>(),
	{
		pageData: {},
		globalData: {},
		modelValue: '',
		FieldItem: null,
	}
);
const { FieldItem, inputData, globalData, pageData, modelValue } = toRefs(props);
const componentVal = ref(FieldItem.value?.attrs.activeName);
const emit = defineEmits(['update:modelValue']);
watch(modelValue, (newVal) => {
	if (FieldItem.value?.tag !== 'span') {
		componentVal.value = newVal ?? '';
	}
});

watch(componentVal, (newVal) => {
	emit('update:modelValue', newVal);
});

const getParams = (params: any[]): Record<string, any> | undefined => {
	const param = ref<Record<string, any>>({});
	if (params.length) {
		params.forEach((item: Record<string, any>) => {
			param.value[item.name] = calcFieldValue(4, item.value, props.inputData, props.pageData, props.globalData);
		});
		props;
		return param;
	} else {
		return undefined;
	}
};

const handleTabClick = (tab) => {
	console.log('handleTabClick', tab.index);
};
</script>

<style lang="scss" scoped>
.custom-tabs-label .el-icon {
	vertical-align: middle;
}
.custom-tabs-label span {
	vertical-align: middle;
	margin-left: 4px;
}
</style>
